<template>
  <div class="address-container">
    <div style="margin-bottom:16px;">
      <el-select
        v-model="item.checkedList"
        :placeholder="placeholder"
        popper-class="global-select-down resource-select-custom"
        class="address-select"
        size="small"
        collapse-tags
        filterable
        multiple
        clearable
        @change="select">
        <el-option-group
          v-for="(value, index) in addressList"
          :key="index"
          :label="value.label"
        >
          <el-option
            v-for="group in value.options"
            :key="group.key"
            :label="group.label"
            :value="group.key"/>
        </el-option-group>
      </el-select>
    </div>
    <div class="filter-item-checkbox">
      <el-checkbox-group v-model="item.checkedList" class="filter-checkbox-group" text-color="#fd3264" fill="#fd3264" @change="changeFilter(item)">
        <div class="el-checkbox">
          <span v-if="item.checkedList.length === 0" class="check-box-btn active"><span class="check-box-style"/><span class="el-checkbox__label">全部</span></span>
          <span v-else class="check-box-btn" @click.stop="cancelSelect(item)"><span class="check-box-style"/><span class="el-checkbox__label">全部</span></span>
        </div>
        <el-checkbox
          v-for="(value, index) in hotAddress"
          :key="index"
          :label="value.key"
        >
          <el-tooltip :open-delay="800" placement="top">
            <span slot="content" style="max-width:200px;">{{ value.label }}</span>
            <span class="tool-tip-content">{{ value.label }}</span>
          </el-tooltip>
        </el-checkbox>
        <div style="margin-right:32px;"/>
      </el-checkbox-group>

    </div>
  </div>

</template>
<script>
import '@/styles/extend.scss';
export default {
  name: 'AddressSelect',
  props: {
    item: {
      type: Object,
      default: () => {
        return null;
      }
    },
    placeholder: {
      type: String,
      default: '请选择城市'
    },
    defaultTag: {
      type: Array,
      default: () => {
        return ['北京', '上海', '广州', '深圳', '成都', '杭州', '--'];
      }
    },
    selectTag: {
      type: Array,
      default: () => {
        return ['热门城市', '其他城市'];
      }
    }
  },
  data() {
    return {
      hotAddress: [],
      addressList: []
    };
  },
  watch: {
    item: function(newValue, old) {
      this.getHotAddress(newValue);
    }
  },
  created() {
    if (this.item) {
      this.getHotAddress(this.item);
    }
  },
  methods: {
    getHotAddress(data) {
      const valueList = data.valueList;
      const defaultAddress = this.defaultTag;
      const hotAddress = defaultAddress.map(i => {
        return {
          key: i,
          label: i
        };
      });
      let addressList = [];
      this.hotAddress = hotAddress;
      if (valueList && valueList.length > 0) {
        addressList = valueList.filter(i => {
          return !defaultAddress.includes(i.key);
        });
      }
      this.addressList = [
        { label: this.selectTag[0], options: hotAddress },
        { label: this.selectTag[1], options: addressList }
      ];
    },
    select() {
      this.$emit('changeFilter', this.item);
    },
    cancelSelect(item) {
      this.$emit('cancelSelect', item);
    },
    changeFilter(item) {
      this.$emit('changeFilter', item);
    }
  }
};
</script>>
<style lang="scss" scoped>
.address-container {
  & ::v-deep {
    .el-tag {
      color: #406EFF !important;
      background-color: #ecf1ff !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .el-select {
      display: flex;
      width: 240px;
      align-items: center;
      .el-input__inner {
        height: 30px;
        width: 240px;
      }
      .el-select__caret {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }
  }
}
.address-select {
  flex-shrink: 0;
  & ::v-deep {
    .el-input__inner {
      &::-webkit-input-placeholder { /* WebKit browsers */
        color: #999;
      }
      &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #999;
      }
      &:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #999;
      }
    }
  }
}
</style>
<style lang="scss">
.resource-select-custom {
  width: 180px;
}
</style>
